<!--设备实时卡片：显示读数组件-->
<style scoped>
.boddd {
  display: flex;
  padding-right: 10px;
}
.textLeft {
  text-align: left;
  flex: 2;
  overflow: hidden;
  white-space: nowrap;
}
.textMid {
  flex: 3;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  color: orange;
}
.textRgiht {
  text-align: right;
  flex: 1;
}
.chartIcon {
  flex: 0 0 20px;
  cursor: pointer;
}

</style>
<template>
  <div>
    <div class="boddd">
      <p class="textLeft">{{property.name}}</p>
      <p class="textMid">{{property.value === null ? 'N/A' : property.value}}</p>
      <p class="textRgiht">{{property.unit}}</p>
      <p class="chartIcon" @click="chartModalClick()">
        <Icon type="ios-pulse" color="#57a3f3" /> </p>
    </div>
    <!-- chart弹窗 -->
    <NumLineModal :did="did" :property="property" :show="show" @cancel="cancel()" ref="lllss"></NumLineModal>
  </div>
</template>
<script>
import NumLineModal from './NumLineModal.vue'
export default {
  components: { NumLineModal },
  name: 'NumLine',
  props: ['did', 'property'],
  created: function () {},
  data () {
    return {
      show: false
    }
  },
  methods: {
    chartModalClick: function () {
      this.show = true
    },
    cancel: function () {
      this.show = false
    }
  },
  beforeDestroy() {}
}

</script>
